<template>
  <div>
    <div>
      <image :src="current_fight_group_tpl.picture_url" class="Banner"></image>
      <div class="reduce-con">
        <div class="reduce">立省 ￥{{current_fight_group_tpl.original_price/100-current_fight_group_tpl.price/100}}</div>
        <div style="padding-left:10px;color:#FA5B58;">{{current_fight_group_tpl.people_num}}人团</div>
      </div>
      <div style="padding:10px 0px 10px 10px;background:#fff;">
        <div style="font-size:15px;font-weight: bold;">{{current_fight_group_tpl.product_name}}</div>
        <div style="font-size:14px;color:#A6A6A6;padding-top:10px;">{{current_fight_group_tpl.describe}}</div>
        <div style="font-size:14px;color:#A6A6A6;padding-top:10px;border-bottom:1px solid #E6E6E6;padding-bottom:8px;">开团后{{current_fight_group_tpl.time}}分钟内有效</div>
        <div style="padding-top:10px;font-size:15px;">拼团流程</div>
        <div style="color:#A6A6A6;font-size:11px;padding-top:10px;">
          <van-row>
            <van-col span="6">
              <div>开团</div>
              <div>或者参团</div>
            </van-col>
            <van-col span="6">
              <div>分享至群</div>
              <div>邀请好友参团</div>
            </van-col>
            <van-col span="6">
              <div>满员成团</div>
              <div>获得优惠券</div>
            </van-col>
            <van-col span="6">
              <div>超时未成</div>
              <div>则拼团失败</div>
            </van-col>
          </van-row>
        </div>
      </div>
    </div>
    <div class="launch_group_btn">
      <van-row>
        <van-col span="6" style="text-align:center;" @click="handleGroup()">
          <image src="/static/assets/group_head.png" class="group_head"></image>
          <div style="color:#A6A6A6;font-size:11px;">我的拼团</div>
        </van-col>
        <van-col span="18" style="text-align:center;">
          <div class="launch_group" @click="handleOpenGroup()">发起拼团</div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import api from '@/utils/api'
import { mapState, mapActions ,mapGetters } from 'vuex'
export default {
  data () {
    return {
      group_tpl_id:0
    }
  },
  computed: {
    ...mapGetters([
      'current_fight_group_tpl'
    ]) 
  },
  methods: {
    ...mapActions([
      'getFightGroupTpl'
    ]),
     handleGroup(){
      wx.navigateTo({url: '/pages/user/group'})
    },
    handleOpenGroup(){
      wx.navigateTo({url: '/pages/activity/group/group_pay?group_tpl_id=' + this.group_tpl_id})
    }
  },
  mounted () {
    
  },
  onLoad (options) {
    this.group_tpl_id = options.group_tpl_id
    this.getFightGroupTpl({id:this.group_tpl_id})
  }
}
</script>

<style>
page{
  background: #F2F2F2;
}
.Banner{
  height:200px;
  width: 100%;
  margin-bottom: -5px;
}
.reduce-con{
  display: flex;
  height: 40px;
  line-height: 40px;
  background: #FFF2F2;
  font-size: 15px;
}
.reduce{
  width: 80px;
  background: #FA5B58;
  text-align: center;
  color: #fff;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
.launch_group_btn{
  position: fixed;
  bottom: 0;
  height: 60px;
  width: 100%;
  background: #fff;
}
.group_head{
  width: 25px;
  height: 25px;
  padding-top: 5px;
}
.launch_group{
  width: 90%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #FEB3BA;
  border-radius: 20px;
  margin-top: 10px;
  font-size: 16px;
  color: #735F61;
}
</style>
